<template>
<div id="app">
  <!-- 导航 -->
  <div id="nav">
    <ul class="nav-list">
      <li>Vue</li>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/about">关于我们</router-link>
      </li>
      <li class="user">
        <div class="dropdown">
          <router-link to="/user">账户中心</router-link>
          <!-- 必须点击下拉箭头才显示二级路由列表 -->
          <span class="iconfont icon--shanglajiantou" v-show="flag" @click="flag = false"></span>
          <span class="iconfont icon--xialajiantou" v-show="!flag" @click="flag = true"></span>
        </div>
        <!-- 二级路由 -->
        <div :class="['dropdown-menu', flag ? 'show' : '']" @click="flag = false">
          <router-link to="/user/pass">密码管理</router-link><br />
          <router-link to="/user/order">订单管理</router-link>
          <!-- 
              /user/pass
              pass组件的内容一定是显示在user的router-view位置
             -->
        </div>
      </li>
      <li>
        <router-link to="/login">登录</router-link>
      </li>
      <li>
        <router-link to="/news">新闻</router-link>
      </li>
    </ul>
  </div>
  <!-- 导航视图 -->
  <div class="content">
    <router-view />
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    }
  }
}
</script>

<style lang="less">
#app {
  width: 800px;
  margin: 0 auto;

  #nav {
    border-radius: 5px;
    background-color: #f8f8f8;

    .nav-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      list-style: none;
      padding: 10px;

      li {
        padding: 0 15px;
        // border: 1px solid black;
      }

      .user {
        position: relative;

        .dropdown-menu {
          display: none;
          box-sizing: border-box;
          position: absolute;
          border: 1px solid #ddd;
          height: 100px;
          width: 100%;
          left: 0;
          padding: 10px;
          z-index: 999;
          background-color: #fff;
        }

        .show {
          display: block;
        }
      }
    }

    a {
      color: #a3a3a5;
      text-decoration: none;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }

  .content {
    padding: 20px;
    border-radius: 5px;
    background-color: #eeeeee;
  }
}
</style>
